.text {
  color: var(--text-color-text-3, #737a87);

  /* EN or Digital/body-2 regular */
  font-family: Roboto;
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px; /* 169.231% */
  letter-spacing: 0.039px;
}

.dot {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #8585ff;
}

.dot-breath {
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(82, 82, 255, 1);
  opacity: 0.75;
  animation: breath 1s cubic-bezier(0,0,.2,1) infinite;
}

.isLoading {
  .text {
    color: #5252ff;
    background: linear-gradient(90deg, #737a87 30%, #5252ff 80%);
    background-size: 200%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: loading 2s linear infinite;
  }
}

@keyframes loading {
  100% {
    background-position: -400% 0;
  }
}

@keyframes breath {
  75%,
  100% {
    transform: scale(2.2);
    opacity: 0;
  }
}
